<template>
	<view class="contain">
		<!-- 搜索框 -->
		<view class="searchInput">
			<!-- 搜索框的放大镜图标 -->
			<image class="search_icon" src="https://img-blog.csdnimg.cn/20210316161109714.png"></image>
			<input placeholder="搜索班级" style="font-size: 26rpx;"/>
		</view>
		<!-- 分类 -->
		<view class="class_class">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item, index) in classType" :key="index" style="margin-right: 20rpx;display: inline-block;">
					<view :class="{'class_active': item.type == currentType}" @click="changeType(item.type)">
						{{item.name}}
					</view>
				</view> 
			</scroll-view>
		</view>
		<!-- 班级信息 -->
		<view v-if="classList.length > 0" class="class_info" v-for="(item, index) in classList" :key="index" @click="jumpTo(item)">
			<view class="class_detail">
				<view>《{{item.name}}》</view>
			</view>
		</view>
		<view v-if="classList.length == 0">
			<view class="null">
				<image src="../../static/classnull.png" mode="widthFix"></image>
				<view style="justify-content: center; font-size: medium; width: 428rpx; margin-left: 280rpx; margin-top: 70rpx; color: #707070;">暂时没有班级</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<image v-if="operationType == 'manage'" src="../../static/add.png" class="addBtn" @click="addClass"></image>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	let that;
	export default {
		data() {
			return {
				classType: [
					{
						name: '钢琴',
						type: 0
					},{
						name: '吉他',
						type: 1
					},{
						name: '架子鼓',
						type: 2
					},{
						name: '声乐',
						type: 3
					},{
						name: '古筝',
						type: 4
					},{
						name: '非洲鼓',
						type: 5
					},{
						name: '主持',
						type: 6
					},{
						name: '尤克里里',
						type: 7
					}
				],
				classList: '',
				currentType: 0,
				operationType: 'schedule'
			}
		},
		onShow() {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			let options = currentPage.options;
			if(options.operationType){
				this.operationType = options.operationType;
			}
			this.showClass(this.classType[this.currentType].name);
		},
		onLoad() {
			that = this;
		},
		methods: {
			addClass: function(){
				uni.navigateTo({
					url: '../addClass/addClass?index=' + this.currentType
				})
			},
			jumpTo: function(item){
				if(this.operationType == 'schedule'){
					uni.navigateTo({
						url:"../schedule/schedule?item=" + JSON.stringify(item)
					})
				}else if(this.operationType == 'manage'){
					uni.navigateTo({
						url:"../addClass/addClass?item=" + JSON.stringify(item)
					})
				}else{
					uni.navigateTo({
						url:"../homeworkAll/homeworkAll?className=" + item.name
					})
				}
			},
			changeType: function(type){
				this.currentType = type;
				switch(type){
					case 0:
						// 显示钢琴的班级
						this.showClass('钢琴');
						break;
					case 1:
						// 显示吉他班级
						this.showClass('吉他');
						break;
					case 2:
						// 显示架子鼓班级
						this.showClass('架子鼓');
						break;
					case 3:
						// 显示声乐班级
						this.showClass('声乐');
						break;
					case 4:
						// 显示古筝班级
						this.showClass('古筝');
						break;
					case 5:
						// 显示非洲鼓课程
						this.showClass('非洲鼓');
						break;
					case 6:
						// 显示主持课程
						this.showClass('主持');
						break;
					case 7:
						// 显示尤克里里课程
						this.showClass('尤克里里');
						break;
				}
			},
			showClass: function(type){
				// 从数据库查询
				db.collection('class').where({
					institutionId: getApp().globalData.userInfo.institutionId,
					type: type
				}).get().then(res=>{
					res.data.forEach(item => {
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							let list = res.fileList[0];
							item.imageUrl = list.tempFileURL;
						})
					})
					that.classList = res.data;
				})
			},
		},
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	
	.contain{
		margin: 10rpx 30rpx;
	}
	
	.searchInput{
		background-color: #fff;
		width: 670rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		border-radius: 40rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
	}
	
	.search_icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	
	.class_class{
		display: flex;
		justify-content: space-between;
		margin: 0rpx 25rpx;
	}
	
	.class_info{
		background-color: #fff;
		height: 70rpx;
		padding: 30rpx;
		margin: 40rpx 0;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
	}

	.class_detail{
		display: flex;
		/* flex-direction: column; */
		width: max-content;
		align-items: center;

		/* width: calc(100% - 150rpx); */
	}
	
	.class_active{
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
	}
	.addBtn{
		position: fixed;
		width: 60rpx;
		height: 60rpx;
		bottom: 140rpx;
		right: 80rpx;
	}
	.null {
		width: 100%;
		/* height: 400rpx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #707070;
		margin-top: 50rpx;
	}
	.null image {
		
		/* height: 240rpx; */
		/* margin-left: 160rpx; */
		margin-top: 100rpx;
	}
</style>
